<template>
    <div class="teacherDetail">
        <!-- 导航-->
        <div class="top">
            <van-nav-bar
           title="讲师详情"
           left-arrow
           @click-left="$router.go(-1)"
          />
        </div>
        <!-- 顶部简历 -->
        <ul>
            <li class="li1">
                <img :src="list.avatar" alt="">
            
            </li>
            <li class="li2">
                <p>{{list.real_name}}</p>
                <p>{{list.introduction}}</p>
                <p>
                    <span  style="padding-right:.2rem">女</span>
                    <span>年教龄：10年</span>
                </p>
            </li>
            <li class="li3">
                <p class="btn" @click="gz">{{flag==2?'关注':'取消关注'}}</p>
            </li>
        </ul>
        <van-tabs v-model="active" swipeable color='rgb(235, 97, 0)' line-width='1.5rem' title-active-color='rgb(235, 97, 0)'>
        <van-tab title="讲师介绍" >
          <!-- <van-panel title="名称" :status="list.real_name"></van-panel>
            <van-panel title="介绍" :status='list.introduction'></van-panel>
            <van-panel title="年教龄" status="32"></van-panel>
            <van-panel title="性别" status='女'></van-panel> -->
        </van-tab>
        <van-tab title="主讲课程">
           <!-- <dl>
            <dd v-for="(ite,index) in Class" :key="index" >
                <p style="fontSize:0.5rem;margin:0rem">{{ite.title}}</p>
                <p style="fontSize:0.3rem;color: #777;margin:0.15rem 0rem">共点击量{{ite.sales_num}}</p>         
               <p class="ite-bot"> 
                        <span style="fontSize:0.3rem;color: #777;">{{ite.course_type}}人报名</span> 
                   <span style="fontSize:0.45rem;color:#ff3c00;"><van-icon name="like" />{{ite.price}}</span> 
               </p>
        
            </dd>
        </dl> -->
            
          
        </van-tab>
        <van-tab title="学员评价">
            <van-empty
  class="custom-image"
  image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
  description="暂无数据"
/>
        </van-tab>
        </van-tabs>
    </div>
</template>

<script>
import { teacher, teacherclass, teachers ,collect} from "../../Request/http.js";
export default {
  name: "EverydayTeacherDetail",
  data() {
    return {
      list: [],
      active: 1,
      Class: [],
      flag:''
    };
  },

  mounted() {
    console.log(this.$route.query.id);
    this.apply();
  },

  methods: {
    gz(){
      collect(this.$route.query.id).then(res => {
       console.log(res);
       this.apply()
      });
    },
    apply() {
      // 讲师头部信息
      teacher(this.$route.query.id).then(res => {
        this.list = res.teacher;
         this.flag=res.flag
        console.log(this.list);
      });
      //   讲师简介
      teachers(this.$route.query.id).then();
      //   讲师课程
      teacherclass(this.$route.query.id).then(res3 => {
      this.Class = res3.list;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .van-nav-bar {
  background: #5ba2f4;
  line-height: 3rem;
  height: 3rem;
  .van-nav-bar__left {
    .van-icon {
      font-size: 0.5rem;
      color: #fff;
    }
  }
  .van-nav-bar__title {
    font-size: 0.5rem;
    color: #fff;
  }
}
.teacherDetail {
  position: relative;
  .top {
    margin-bottom: 2.25rem;
  }
  ul {
    overflow: hidden;
    position: absolute;
    top: 1.625rem;
    // right: 45%;
    left: 3%;
    z-index: 10;
    border-radius: 0.133rem;
    background: #fff;
    width: 90%;
    margin: 0.1rem 0rem;
    padding: 0.2rem;

    .li3 {
      float: right;
      margin-top: 0.25rem;
      margin-right: 1.5rem;
      .btn {
        width: 1.753rem;
        height: 0.747rem;
        background: #ebeefe;
        border-radius: 0.4rem;
        text-align: center;
        line-height: 0.747rem;
        color: #eb6100;
      }
    }
    .li2 {
      float: left;
      padding-left: 0.625rem;
    }
    .li1 {
      height: 0.625rem;
      margin-top: 0.25rem;
      float: left;
      img {
        width: 1.2rem;
        height: 1.2rem;
      }
    }
  }
  dl {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 100%;
    dd {
      margin: 0rem;
      padding: 0.5rem;
      position: relative;
      color: #323233;
      font-size: 0.373rem;
      line-height: 0.64rem;
      background-color: #fff;
      border-bottom: 0.373rem solid rgb(242, 243, 245);
      img {
        width: 1.25rem;
        height: 1.25rem;
        border-radius: 50%;
      }
      .ite-bot {
        margin: 0;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
      }
    }
  }
}
.custom-image .van-empty__image {
    width: 90px;
    height: 90px;
  }
</style>